<template>
    <div>
        <mu-container>
            <el-container>
                <el-header>
                    <el-row>
                        <el-page-header @back="goBackToMusicView" content="上传界面">
                        </el-page-header>
                    </el-row>
                </el-header>
                <el-main>
                    <el-row type="flex" justify="center">
                        <el-button size="small" type="success" @click="submitUpload">上传到服务器</el-button>
                    </el-row>
                    <el-row type="flex" justify="center">
                        <el-upload
                                class="upload-demo"
                                drag
                                ref="upload"
                                :on-exceed="handleFileOnExceed"
                                :headers="importHeaders"
                                :on-preview="handlePreview"
                                :on-remove="handleRemove"
                                :file-list="fileList"
                                :auto-upload="false"
                                :limit="5"
                                :before-upload="beforeAvatarUpload"
                                :action="uploadUrl"
                                multiple>
                            <i class="el-icon-upload"></i>
                            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                            <div class="el-upload__tip" slot="tip">只能上传 mp3、flac、wav文件，且不超过500MB</div>
                        </el-upload>
                    </el-row>

                </el-main>
            </el-container>
        </mu-container>


    </div>
</template>

<script>
    export default {
        name: "upload",
        data() {
            return {
                uploadUrl: "/api/music/upload",
                importHeaders: {Authorization: 'bearer ' + this.$cookie.get("echo_access_token")},
                fileList: []
            };
        },
        methods: {
            //打开消息
            open(responseMsg, messageType) {
                this.$message({
                    type: messageType,
                    showClose: true,
                    message: responseMsg
                });
            },
            submitUpload(formName) {
                this.$refs.upload.submit();
                //填充input值
                /* this.$axios.post("/api/music/uploadMusic", this.$qs.stringify("")).then(res => {
                     console.log(res);
                     let result = res.data;
                     let data = result.data;
                     if (result && result.code === 200) {
                         this.open(result.message, 'success');
                     } else {
                         this.open(result.message, 'error');
                     }
                 })*/
            },
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePreview(file) {
                console.log(file);
            },
            handleFileOnExceed(files, fileList) {
                //TODO  弹出文件超出限制 错误消息
                console.log("当前选中的文件数量，已达到最大值");
            },
            beforeAvatarUpload(file) {
                let typelist = [];
                const isFLAC = 'audio/flac';
                const isMP3 = 'audio/mp3';
                const isWmv = 'audio/wmv';
                const isWav = 'audio/wav';
                const isApe = 'audio/ape';
                typelist.push(isFLAC);
                typelist.push(isMP3);
                typelist.push(isWmv);
                typelist.push(isWav);
                typelist.push(isApe);
                const isLt50M = file.size / 1024 / 1024 < 500;
                let ispermission = typelist.includes(file.type);
                if (!ispermission) {
                    this.$message.error('上传的音乐文件只能是 flac、mp3、wmv、wav、ape 格式!');
                }
                if (!isLt50M) {
                    this.$message.error('上传的音乐文件总大小不能超过 500MB!');
                }
                return ispermission;
            },
            goBackToMusicView() {
                console.log('go back');
                this.$router.push('/musicview');
            }
        }
    }
</script>

<style scoped>
    .el-select .el-input {
        width: 130px;
    }

    .input-with-select .el-input-group__prepend {
        background-color: #fff;
    }
</style>